<template>
  <div class="bg-white pd-10-30 h100">
    <el-form
      ref="inlineForm"
      :rules="rules"
      :model="formInline"
      class="h100">
<!--      第一行-->
      <el-row :gutter="40" class="">
        <el-col :span="4">
          <el-form-item label="员工姓名" prop="employeeName">
            <el-input v-model="formInline.employeeName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别" prop="gender">
            <el-radio v-model="formInline.gender" label="1">男</el-radio>
            <el-radio v-model="formInline.gender" label="2">女</el-radio>
<!--            <el-input v-model="formInline.gender" placeholder="请输入" />-->
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="formInline.age" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--第二行-->
      <el-row>
        <el-col :span="6">
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="formInline.phoneNumber" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--第三行-->
      <el-row>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="idNumber">
            <el-input v-model="formInline.idNumber" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--第四行-->
      <el-row :gutter="40">
        <el-col :span="4">
          <el-form-item label="职位" prop="position">
            <el-select v-model="formInline.position" placeholder="请选择职位">
              <el-option label="经理" value="1" />
              <el-option label="技术员" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="密码" prop="password">
            <el-input v-model="formInline.password" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="确认密码" prop="password2">
            <el-input v-model="password2" placeholder="请再次输入密码" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--第五行-->
      <el-row>
        <el-col :span="24" class="tc">
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button class="mgl-30" @click="resetForm">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
    import { baseApi } from '@/service/api';
    import { validTel } from '@/assets/utils/validate';
    export default {
        name: "empEntry",
      components: {
      },
      data() {
        const validateTel = (rule, value, callback) => {
          if (!validTel(value)) {
            callback(new Error('请输入正确的手机号！'));
          } else {
            callback();
          }
        };
        var validateIdNumber = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入身份证号'));
          } else {
            callback();
          }
        };
        var validatePassword = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.password2 !== '') {
              this.$refs.ruleForm.validateField('password2');
            }
            callback();
          }
        };
        var validatePassword2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.formInline.password) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        return {
          rules: {
            phoneNumber: [{ required: true, trigger: 'blur', validator: validateTel }],
            idNumber:[{ required: true, trigger: 'blur', validator: validateIdNumber }],
            password: [{ required: true, trigger: 'blur', validator: validatePassword }],
            password2: [
              { required: true, trigger: 'blur', validator: validatePassword2 }
            ]
          },
          formInline: {
            "employeeName": '', // 员工姓名
            "gender": "1", // 性别
            "age": '', // 年龄
            "phoneNumber": '', // 手机号
            "idNumber": '', // 身份证号
            "position": '', // 职位
            "beginData":'',//录入时间
            "password":'',//密码
          },
          password2:'',
          isSearch: false,
          latestAlgorData: null, // 保存最近一次的查询条件，以免表单被重置或还未查询当前条件的数据时就刷新table而出错
        }
      },
      mounted() {
      },
      methods: {
        onSubmit() {
          // this.$refs.inlineForm.validate((valid) => {
          //   console.log(valid)
          //   // if (!valid) return false;
          //   // this.isSearch = true;
          //   // this.getAlgorDataList(this.formInline)
          // });
          let param={
              empName: this.formInline.employeeName,
              empSex: true,
              empPhone: this.formInline.phoneNumber,
              empCid: this.formInline.idNumber,
              empJob: this.formInline.position,
              empRTime: "2021-03-22",
              empZt: null,
              empPassword: this.formInline.password
            }
            console.log(param)
          baseApi.emp(param).then(res => {
            console.log(res)
            // this.$router.push("/")
          })
        },
        // 查询算法相关数据
        resetForm() {
          // this.$refs.inlineForm.resetFields() // 不懂？
          this.formInline={
            "employeeName": '', // 员工姓名
            "gender": '', // 性别
            "age": '', // 年龄
            "phoneNumber": '', // 手机号
            "idNumber": '', // 身份证号
            "position": '', // 职位
            "beginData":'',//录入时间
            "password":'',//密码
          }
        },
      }
    }
</script>

<style scoped>
  .el-form-item /deep/ .el-select{
    width: 66%;
  }
  .el-input{
    width: 66%;
  }
</style>
